<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>荣耀CG动画 - 精彩CG</title>
  <link rel="stylesheet" href="css/cg.css">
  <script src="js/cg.js" defer></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="header">
    <div class="header-container">
      <div class="logo">
        <a href="index.html">
          <img src="images/SLogo.png" alt="荣耀CG动画">
        </a>
      </div>
      <div class="search-box">
        <input type="text" placeholder="搜索CG动画...">
        <button class="search-btn">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- 筛选导航 -->
  <nav class="filter-nav">
    <div class="filter-container">
      <div class="filter-tabs">
        <button class="filter-tab active" data-filter="all">全部</button>
        <button class="filter-tab" data-filter="wzry">王者荣耀</button>
        <button class="filter-tab" data-filter="hpej">和平精英</button>
        <button class="filter-tab" data-filter="jcc">金铲铲之战</button>
      </div>
      <div class="sort-options">
        <select id="sort-select">
          <option value="newest">最新发布</option>
          <option value="popular">最受欢迎</option>
          <option value="duration">时长</option>
        </select>
      </div>
    </div>
  </nav>

  <!-- 底部导航栏 -->
  <nav class="bottom-nav">
    <a href="index.html" class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="events.html" class="nav-item">
      <i class="fa fa-trophy"></i>
      <span>赛事</span>
    </a>
    <a href="cg.html" class="nav-item active">
      <i class="fa fa-film"></i>
      <span>CG动画</span>
    </a>
    <a href="profile.html" class="nav-item">
      <i class="fa fa-user"></i>
      <span>个人中心</span>
    </a>
  </nav>

  <!-- 主内容区 -->
  <main class="main-content">
    <!-- 精选CG -->
    <section class="featured-cg">
      <h2 class="section-title">精选CG</h2>
      <div class="featured-container">
        <div class="featured-item">
          <div class="featured-thumb">
            <img src="images/lun1.png" alt="王者荣耀 - 新英雄预告">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">03:45</span>
          </div>
          <div class="featured-info">
            <h3>王者荣耀 - 新英雄预告</h3>
            <p>下一位英雄即将登场，神秘面纱即将揭开</p>
            <div class="featured-meta">
              <span><i class="fa fa-eye"></i> 12.5万</span>
              <span><i class="fa fa-heart"></i> 8.3万</span>
              <span><i class="fa fa-calendar"></i> 2023-10-15</span>
            </div>
          </div>
        </div>
        <div class="featured-item">
          <div class="featured-thumb">
            <img src="images/lun2.png" alt="和平精英 - 新版本宣传">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
            <span class="duration">05:12</span>
          </div>
          <div class="featured-info">
            <h3>和平精英 - 新版本宣传</h3>
            <p>全新地图上线，体验不一样的战场</p>
            <div class="featured-meta">
              <span><i class="fa fa-eye"></i> 9.7万</span>
              <span><i class="fa fa-heart"></i> 6.2万</span>
              <span><i class="fa fa-calendar"></i> 2023-09-28</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CG列表 -->
    <section class="cg-list">
      <h2 class="section-title">CG动画列表</h2>
      <div class="cg-container">
        <!-- 王者荣耀 -->
        <div class="cg-group" data-game="wzry">
          <h3 class="group-title">王者荣耀</h3>
          <div class="group-content">
            <div class="cg-item" data-id="1">
              <div class="cg-thumb">
                <img src="images/cg1.png" alt="王者荣耀 - 英雄故事">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">08:25</span>
              </div>
              <h4>英雄故事：海诺 - 朵莉亚</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 15.5万</span>
                <span><i class="fa fa-heart"></i> 10.7万</span>
              </div>
            </div>
            <div class="cg-item" data-id="2">
              <div class="cg-thumb">
                <img src="images/cg5.png" alt="王者荣耀 - 英雄故事">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">06:58</span>
              </div>
              <h4>英雄故事：澜 - 蔡文姬</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 18.2万</span>
                <span><i class="fa fa-heart"></i> 12.3万</span>
              </div>
            </div>
            <div class="cg-item" data-id="3">
              <div class="cg-thumb">
                <img src="images/cg6.png" alt="王者荣耀 - 英雄故事">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">04:12</span>
              </div>
              <h4>英雄故事：云中君 - 瑶</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 23.8万</span>
                <span><i class="fa fa-heart"></i> 19.5万</span>
              </div>
            </div>
            <div class="cg-item" data-id="4">
              <div class="cg-thumb">
                <img src="images/cg4.png" alt="王者荣耀 - 英雄故事">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">03:30</span>
              </div>
              <h4>英雄故事：阿通 - 宫本武藏</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 30.1万</span>
                <span><i class="fa fa-heart"></i> 25.2万</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 和平精英 -->
        <div class="cg-group" data-game="hpej">
          <h3 class="group-title">和平精英</h3>
          <div class="group-content">
            <div class="cg-item" data-id="5">
              <div class="cg-thumb">
                <img src="images/cg8.png" alt="和平精英 - 战场实录">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">25:45</span>
              </div>
              <h4>战场实录：沙漠风暴行动</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 14.8万</span>
                <span><i class="fa fa-heart"></i> 9.3万</span>
              </div>
            </div>
            <div class="cg-item" data-id="6">
              <div class="cg-thumb">
                <img src="images/cg7.png" alt="和平精英 - 战场实录">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">20:32</span>
              </div>
              <h4>战场实录：海岛突袭</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 16.5万</span>
                <span><i class="fa fa-heart"></i> 10.8万</span>
              </div>
            </div>
            <div class="cg-item" data-id="7">
              <div class="cg-thumb">
                <img src="images/cg13.png" alt="和平精英 - 战场实录">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">12:10</span>
              </div>
              <h4>战场实录：雪地求生</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 20.3万</span>
                <span><i class="fa fa-heart"></i> 15.5万</span>
              </div>
            </div>
            <div class="cg-item" data-id="8">
              <div class="cg-thumb">
                <img src="images/cg14.png" alt="和平精英 - 战场实录">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">8:20</span>
              </div>
              <h4>战场实录：雨林激战</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 35.7万</span>
                <span><i class="fa fa-heart"></i> 25.9万</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 金铲铲之战 -->
        <div class="cg-group" data-game="jcc">
          <h3 class="group-title">金铲铲之战</h3>
          <div class="group-content">
            <div class="cg-item" data-id="9">
              <div class="cg-thumb">
                <img src="images/cg9.png" alt="金铲铲之战 - 阵容搭配">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">07:30</span>
              </div>
              <h4>最强阵容：六法三约德尔</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 8.5万</span>
                <span><i class="fa fa-heart"></i> 5.2万</span>
              </div>
            </div>
            <div class="cg-item" data-id="10">
              <div class="cg-thumb">
                <img src="images/cg10.png" alt="金铲铲之战 - 阵容搭配">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">06:45</span>
              </div>
              <h4>最强阵容：九战三贵族</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 10.8万</span>
                <span><i class="fa fa-heart"></i> 6.7万</span>
              </div>
            </div>
            <div class="cg-item" data-id="11">
              <div class="cg-thumb">
                <img src="images/cg11.png" alt="金铲铲之战 - 阵容搭配">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">08:15</span>
              </div>
              <h4>最强阵容：七法双龙</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 20.2万</span>
                <span><i class="fa fa-heart"></i> 15.8万</span>
              </div>
            </div>
            <div class="cg-item" data-id="12">
              <div class="cg-thumb">
                <img src="images/cg12.png" alt="金铲铲之战 - 阵容搭配">
                <div class="play-overlay">
                  <i class="fa fa-play-circle"></i>
                </div>
                <span class="duration">07:00</span>
              </div>
              <h4>最强阵容：六刺客三虚空</h4>
              <div class="cg-meta">
                <span><i class="fa fa-eye"></i> 28.1万</span>
                <span><i class="fa fa-heart"></i> 15.1万</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门排行榜 -->
    <section class="top-ranking">
      <h2 class="section-title">热门排行榜</h2>
      <div class="ranking-container">
        <div class="ranking-item">
          <div class="rank-number">1</div>
          <div class="ranking-thumb">
            <img src="images/lun1.png" alt="王者荣耀 - 新英雄预告">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
          </div>
          <div class="ranking-info">
            <h4>王者荣耀 - 新英雄预告</h4>
            <div class="ranking-meta">
              <span><i class="fa fa-eye"></i> 12.5万</span>
              <span><i class="fa fa-heart"></i> 8.3万</span>
            </div>
          </div>
        </div>
        <div class="ranking-item">
          <div class="rank-number">2</div>
          <div class="ranking-thumb">
            <img src="images/lun2.png" alt="和平精英 - 新版本宣传">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
          </div>
          <div class="ranking-info">
            <h4>和平精英 - 新版本宣传</h4>
            <div class="ranking-meta">
              <span><i class="fa fa-eye"></i> 9.7万</span>
              <span><i class="fa fa-heart"></i> 6.2万</span>
            </div>
          </div>
        </div>
        <div class="ranking-item">
          <div class="rank-number">3</div>
          <div class="ranking-thumb">
            <img src="images/lun3.png" alt="金铲铲之战 - 最强阵容">
            <div class="play-overlay">
              <i class="fa fa-play-circle"></i>
            </div>
          </div>
          <div class="ranking-info">
            <h4>金铲铲之战 - 最强阵容</h4>
            <div class="ranking" </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 视频播放模态框 -->
  <div class="modal video-modal">
    <div class="modal-content video-content">
      <div class="modal-header">
        <h2 id="video-title">视频播放</h2>
        <button class="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <video id="video-player" controls>
          <source src="" type="video/mp4">
          您的浏览器不支持HTML5视频播放。
        </video>
      </div>
    </div>
  </div>
</body>
</html>